<template>
  <view class="tool-wrap">
    <button class="btn" @tap="pick">选择图片</button>
    <image v-if="img" :src="img" class="preview" mode="widthFix" />
    <text v-if="img" class="result">压缩后体积预计减少：{{ percent }}%</text>
    <text class="hint">原型演示：仅计算估算比例，未真实压缩。</text>
  </view>
</template>

<script>
export default {
  name: 'ImageCompressPlaceholder',
  data() { return { img: '', percent: 60 } },
  methods: {
    pick() {
      uni.chooseImage({ count: 1, success: (res) => {
        this.img = res.tempFilePaths[0]
        this.percent = 40 + Math.round(Math.random()*40)
      }})
    }
  }
}
</script>

<style>
.tool-wrap { display: grid; gap: 12rpx; }
.btn { height: 60rpx; border-radius: 20rpx; border: 2rpx solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #e9ecff; font-size: 24rpx; }
.preview { width: 100%; border-radius: 16rpx; }
.result { font-weight: 600; }
.hint { color: #a7b0d9; }
</style>


